<template>
  <div class="card-wrap animate-on-enter">
    <div class="profile-header">
      <div class="avatar-section">
        <a-avatar 
          :size="80" 
          :src="userInfo.avatar" 
          class="user-avatar"
        >
          {{ userAvatar }}
        </a-avatar>

      </div>
      
      <div class="user-basic-info">
        <h2 class="user-name">{{ userInfo.username || '未设置' }}</h2>
        <p class="user-role">{{ userInfo.role?.name || '普通用户' }}</p>
        <div class="user-stats">
          <div class="stat-item">
            <span class="stat-label">最后登录时间</span>
            <span class="stat-value">{{ formatTime(userInfo.last_login_time) }}</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">最后登录IP</span>
            <span class="stat-value">{{ userInfo.last_login_ip || '未知' }}</span>
          </div>
        </div>
      </div>
      
      <div class="profile-actions">
        <a-button type="primary" @click="handleEditProfile">
          <edit-outlined /> 编辑资料
        </a-button>
        <a-button @click="handleChangePassword">
          <lock-outlined /> 修改密码
        </a-button>
      </div>
    </div>
    
    <a-divider />
    
    <div class="profile-details">
      <a-row :gutter="[24, 24]">
        <a-col :span="12">
          <a-card size="small" title="基本信息" class="info-card">
            <div class="info-item">
              <span class="info-label">用户名：</span>
              <span class="info-value">{{ userInfo.username || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">邮箱：</span>
              <span class="info-value">{{ userInfo.email || '未设置' }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">真实姓名：</span>
              <span class="info-value">{{ userInfo.real_name || '未设置' }}</span>
            </div>
          </a-card>
        </a-col>
        
        <a-col :span="12">
          <a-card size="small" title="账户信息" class="info-card">
            <div class="info-item">
              <span class="info-label">角色：</span>
              <a-tag :color="getRoleColor(userInfo.role?.name)">
                {{ userInfo.role?.name || '普通用户' }}
              </a-tag>
            </div>
            <div class="info-item">
              <span class="info-label">状态：</span>
              <a-tag :color="userInfo.status === 1 ? 'green' : 'red'">
                {{ userInfo.status === 1 ? '正常' : '禁用' }}
              </a-tag>
            </div>
            <div class="info-item">
              <span class="info-label">创建时间：</span>
              <span class="info-value">{{ formatTime(userInfo.created_at) }}</span>
            </div>
            <div class="info-item">
              <span class="info-label">更新时间：</span>
              <span class="info-value">{{ formatTime(userInfo.updated_at) }}</span>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>
    

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user.js'
import { message } from 'ant-design-vue'
import dayjs from 'dayjs'

const router = useRouter()
const userStore = useUserStore()

// 响应式数据

// 计算属性
const userInfo = computed(() => userStore.userInfo || {})
const userAvatar = computed(() => {
  if (userInfo.value.avatar) {
    return userInfo.value.avatar
  }
  return userInfo.value.username?.charAt(0).toUpperCase() || 'U'
})

// 方法
const formatTime = (time) => {
  if (!time) return '未知'
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
}

const getRoleColor = (roleName) => {
  const colorMap = {
    '超级管理员': 'red',
    '管理员': 'blue',
    '普通用户': 'green'
  }
  return colorMap[roleName] || 'default'
}

const handleEditProfile = () => {
  router.push('/settings')
}

const handleChangePassword = () => {
  router.push('/settings?tab=password')
}



onMounted(() => {
  // 如果用户信息为空，重新获取
  if (!userInfo.value.id) {
    // 这里可以调用获取用户信息的API
  }
})
</script>

<style lang="less" scoped>

.profile-header {
  display: flex;
  gap: 24px;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px;
  background: #fafafa;
  border-radius: 8px;
}

.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.user-avatar {
  background: linear-gradient(135deg, #1890ff, #36cfc9);
  font-size: 24px;
  font-weight: 600;
  color: white;
}

.user-basic-info {
  flex: 1;
}

.user-name {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.user-role {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #666;
}

.user-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.stat-value {
  font-size: 13px;
  color: #1a1a1a;
  font-weight: 500;
}

.profile-details {
  margin: 16px 0;
}

.info-card {
  border-radius: 6px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
}

.info-label {
  font-size: 13px;
  color: #666;
}

.info-value {
  font-size: 13px;
  color: #1a1a1a;
}

.profile-actions {
  display: flex;
  gap: 12px;
}



@media (max-width: 768px) {
  .profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .profile-actions {
    flex-direction: column;
    align-items: center;
  }
}
</style>